<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="" />
    <link rel="icon" href="" type="image/png" />
    <title>课程概览</title>
    <link href="css/normalize.min.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="banner"></div>

      <div class="overview-wrapper">
        <div class="main-container main-overview">
          <!--头部导航栏-->
          <div class="logo logo-overview">
            <a :href="`./course_map.html?id=${mapId}`">
              <img src="./images/logo1.png" alt="" />
              <span>课程概览</span>
            </a>
          </div>
          <!--//头部导航栏-->

          <div class="tabs-box tabs-overview">
            <!-- 侧边信息 -->
            <div class="base-info">
              <div class="thumb">
                <img src="./images/thumb.png" alt="" />
              </div>
              <div class="info-wrap">
                <div class="title">{{title}}</div>

                <div class="box">
                  <h2>授课老师</h2>
                  <p>于婉琴</p>
                </div>

                <div class="box">
                  <h2>开课学院</h2>
                  <p>平凡人做非凡事学院</p>
                </div>

                <div class="box">
                  <h2>学时学分</h2>
                  <p>{{course_hour}}课时/{{course_scope}}分</p>
                </div>
              </div>
            </div>

            <!-- 课程名称 -->
            <div class="main-title">{{navTitle}}</div>

            <el-tabs tab-position="left" v-model="tabActive">
              <el-tab-pane label="课程概览">
                <section class="section section-box overview-container">
                  <div class="content">
                    <!-- 主内容 -->
                    <div class="main-body">
                      <!-- 主要信息 -->
                      <div class="main-info">
                        <div class="box">
                          <!-- <div class="hgroup">
                            <i class="icon-kecheng"></i>
                            <span>课程概览</span>
                          </div> -->

                          <div class="tit-group">
                            <i class="icon-jianjie"></i>
                            <span>课程概览</span>
                          </div>

                          <div class="m-content" v-html="excerpt"></div>
                        </div>

                        <div class="box">
                          <!-- <div class="hgroup">
                            <i class="icon-mubiao"></i>
                            <span>课程目标</span>
                          </div> -->

                          <div class="tit-group">
                            <i class="icon-mubiao"></i>
                            <span>课程目标</span>
                          </div>
                          <div class="m-content">
                            <p v-for="(item,idx) in course_goal" :key="idx">
                              {{idx + 1}}、{{item.course_goal_content}}
                            </p>
                          </div>
                        </div>

                        <!-- <div class="box">
                          <div class="hgroup">
                            <i class="icon-xiangguan"></i>
                            <span>课程相关</span>
                          </div>

                          <div class="tit-group">
                            <i class="icon-map"></i>
                            <span>课程相关</span>
                          </div>
                          
                          <div class="m-content">
                            <p>
                              响海极太规无斯科家究响各争济者张价此连圆用位可素上科设两需以农却状质类千矿亲具比次难极总段劳产百老基。万她状六取极己先门思式合平红你八济保件好义专天规没儿由革消结复国权团存小参角治眼花深。集家除其理各周住严制马取省重导指着马自接即高热济南。
                            </p>
                            <p>
                              革动器县马任传步东场时新出全对一目受要争图想报形点气断手酸。事术程族养知林没干求难同资展间立习京数个状活同分速将各支织斯规目容化商北规件少复织道观观很白资表治置受精受必型至何你离选收置名切北区八里之各。置当始知使市价在年存便量太周提海习己江特音做则指圆长自消厂史界此京说属科走级些即己机市角体回容土体立京目近。
                            </p>
                          </div>
                        </div> -->

                        <div class="box">
                          <!-- <div class="hgroup">
                            <i class="icon-xiangguan"></i>
                            <span>毕业要求相关</span>
                          </div> -->

                          <div class="tit-group">
                            <i class="icon-yaoqiu"></i>
                            <span>毕业要求相关</span>
                          </div>
                          <div class="m-content">
                            <el-table :data="goalsArr" border stripe style="width: 100%">
                              <el-table-column
                                align="center"
                                header-align="center"
                                prop="name"
                                label="课程目标"
                                width="120">
                              </el-table-column>
                              <el-table-column prop="yqNames" header-align="center" label="毕业要求">
                                <template #header>
                                  <span style="color: #6cb6fd">毕业要求</span>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </el-tab-pane>
              <el-tab-pane label="课程大纲">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="课程日历">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="线上课程">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="达成度分析">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="课程评价">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="推荐资源">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
              <el-tab-pane label="建设历程">
                <el-empty description="没有相关数据"></el-empty>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>

      <!--底部-->
      <footer>
        <div class="wrapper">
          <div class="copyright">管理科学与房地产学院 版权所有</div>
          <div class="tip">建议使用IE8及以上版本或其他高版本浏览器，屏幕分辨率在1366*768及以上的客户端访问</div>
        </div>
      </footer>
    </div>
  </body>

  <!--//底部-->
  <script src="./js/vue.min.js"></script>
  <script src="./js/lodash.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    function getUrlParams(param) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(param) || ''
    }

    var app = new Vue({
      el: '#app',
      data() {
        return {
          tabActive: 0,
          info: {},
        }
      },
      computed: {
        id() {
          return getUrlParams('id')
        },

        navTitle() {
          const titles = [
            '课程概览',
            '课程大纲',
            '课程日历',
            '线上课程',
            '达成度分析',
            '课程评价',
            '推荐资源',
            '建设历程',
          ]
          return titles[this.tabActive]
        },

        mapId() {
          return getUrlParams('mapId')
        },

        title() {
          return _.get(this.info, 'title.rendered', '')
        },

        excerpt() {
          return _.get(this.info, 'excerpt.rendered', '')
        },

        course_scope() {
          return _.get(this.info, 'acf.course_scope', '')
        },

        course_hour() {
          return _.get(this.info, 'acf.course_hour', '')
        },

        pro_image() {
          return _.get(this.info, 'acf.pro_image', '')
        },

        course_goal() {
          return _.get(this.info, 'acf.course_goal', []) || []
        },
        bykeys() {
          return _.sortBy(_.uniq(_.flatMap(this.course_goal, 'pro_gr_ref_')))
        },
        goals() {
          return _.map(this.course_goal, (item) => {
            const pro_grArrs = _.fromPairs(
              _.map(this.bykeys, (key) => {
                return [key, item.pro_gr_ref_.includes(key)]
              })
            )
            return {
              name: item.course_goal_content,
              ...pro_grArrs,
            }
          })
        },
        goalsArr() {
          return _.map(this.course_goal, (vo) => {
            return {
              name: vo.course_goal_content,
              yqNames: vo.pro_gr_ref_.join('、'),
            }
          })
        },
      },
      mounted() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          if (this.id) {
            fetch(`https://api.kejianxin.com/wp-json/wp/v2/course/${this.id}`)
              .then((res) => {
                return res.json()
              })
              .then((data) => {
                console.log(data, 'data')
                this.info = data || {}
              })
          }
        },
      },
    })
  </script>
</html>
